package com.example.bloom.ui.widget

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.bloom.model.PlantTheme
import com.example.bloom.model.homeGardenThemes
import com.example.bloom.ui.theme.BloomTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment

@Composable
fun HomeGardenListItem(plantTheme: PlantTheme) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(64.dp)
    ) {
        PlantImage(plantTheme)
        Spacer(Modifier.width(8.dp))
        Column(
            modifier = Modifier
                .fillMaxHeight()
        ) {
            Row(
                modifier = Modifier
                    .weight(1f)
                    .padding(start = 8.dp)
            ) {
                TitleAndDescription(plantTheme)
                PlantCheckbox()
            }
            Divider()
        }
    }
}

@Composable
private fun RowScope.PlantCheckbox() {
    var checked by remember {
        mutableStateOf(false)
    }
    Checkbox(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = CheckboxDefaults.colors(
            checkedColor = MaterialTheme.colors.surface,
            checkmarkColor = MaterialTheme.colors.onSurface,
        ),
        modifier = Modifier
            .size(24.dp)
            .align(Alignment.CenterVertically)
    )
}

@Composable
private fun RowScope.TitleAndDescription(plantTheme: PlantTheme) {
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .weight(1f)
    ) {
        Text(
            text = plantTheme.title,
            style = MaterialTheme.typography.h2,
            modifier = Modifier
                .paddingFromBaseline(top = 24.dp)
        )
        Text(
            text = "This is a description",
            style = MaterialTheme.typography.body1,
        )
    }
}

@Composable
private fun PlantImage(plantTheme: PlantTheme) {
    Image(
        painter = painterResource(id = plantTheme.imageRes),
        contentDescription = "${plantTheme.imageRes} image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(64.dp)
            .clip(MaterialTheme.shapes.small)
    )
}

@Preview
@Composable
fun PreviewDarkItem() {
    BloomTheme(darkTheme = true) {
        HomeGardenListItem(homeGardenThemes.first())
    }
}

@Preview
@Composable
fun PreviewLightItem() {
    BloomTheme(darkTheme = false) {
        HomeGardenListItem(homeGardenThemes.first())
    }
}